<template>
  <div class="login-container">
    <div class="login-text">
      <h2>注册</h2>
    </div>
    <div class="login-box">
      <van-cell-group>
        <van-cell>
          <input class="phoneNumber" type="text" placeholder="请输入用户名" v-model="username">
        </van-cell>
        <van-cell class="password">
          <!-- <span>找回密码</span> -->
          <input class="phoneNumber" type="text" placeholder="请输入密码" v-model="password1">
        </van-cell>
        <van-cell class="password">
          <!-- <span>找回密码</span> -->
          <input class="phoneNumber" type="text" placeholder="请确认密码" v-model="password2">
        </van-cell>
      </van-cell-group>
    </div>
    <div class="login-btn" @click="register">
      <p>注册</p>
    </div>
    <div class="login-items">
      <van-checkbox v-model="checked">
        <p>我同意赛事助手  <span class="item">《隐私条款》</span>和 <span class="item">《服务条款》</span></p>
      </van-checkbox>
    </div>

  </div>
</template>

<script>
import { Register } from '@/api/user'
import { mapState } from 'vuex'

export default {
  name: 'wo-register',
  data () {
    return {
      username: '',
      password1: '',
      password2: '',
      checked: true,
      imgSrc: require('@/images/serve/wechat/wechat-icon.png')
    }
  },
  computed: {
    ...mapState(['personal_Information'])
  },
  methods: {
    register () { // 注册用户与数据
      console.log('注册')
      if (this.password1 === this.password2) { // 判断两次输入的密码是否一致
        Register(this.username, this.password1)
          .then(res => {
            console.log('请求结果', res)
            if (res.Message === '注册成功！') {
              this.$router.replace('/')
              this.$toast('注册成功！')
            }
            if (res.Message === '用户名被占用，请更换其他用户名！') {
              this.$toast('用户名被占用，请更换其他用户名！')
            }
            // this.mimashow = !this.mimashow
          })
      } else {
        this.$toast('两次密码输入不一致')
      }
    }
  }
}
</script>
<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .login-text{
    text-align: center;
    /* background-color: antiquewhite; */
    margin-top:15vw ;
  }
  .login-box{
    width: 80%;
    margin: 10vw auto;
    /* background-color: aquamarine; */
    /* border-radius: 5vw; */
  }
  .van-cell{
    height: 10vw;
    /* background-color: antiquewhite; */
    margin-top: 2vw;
    line-height: 10vw;
    border-bottom: 2px solid gainsboro;
  }
 /* ::v-deep .van-cell__value{
    border-radius: 10%;
  } */
  .van-cell input{
    width: 80%;
    border: none;
  }
  .password{
    position: relative;
  }
  .van-cell__value span{
    position: absolute;
    right: 2vw;
    color: rgb(255, 116, 66);
  }
  .login-btn{
    width: 100%;
    height: 12vw;
    /* background-color: aquamarine; */
  }
  .login-btn p{
    height: 100%;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    background-color: rgb(255, 116, 66);
    color: white;
    font-size: 5vw;
    line-height: 12vw;
    border-radius: 1.5vw;
  }
  .login-items{
    position: relative;
    width: 80%;
    background-color: antiquewhite;
    font-size: 2vw;
    margin: 3vw auto;
    text-align: center;

  }
  ::v-deep .van-checkbox{
    width: 83%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .item{
    color: rgb(255, 116, 66);
  }
  .wechat-phone{
    position: fixed;
    bottom: 10vw;
    /* background-color: antiquewhite; */
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .phone{
    /* background-color: aquamarine; */
    height: 12vw;
    line-height: 12vw;
    color: rgb(255, 116, 66);
    border-radius: 6vw;
    border: 4px solid rgb(255, 116, 66);
  }
</style>
